<template>
	<view>
		<view class="cu-bar tabbar" style="margin-bottom: 40rpx;">
			<view class="action" @click="class_control(item)" v-for="(item,index) in tital" :key='index'>
				<view class="iconfont " :class="item.icon" style="font-size: 55rpx; margin-bottom: 30rpx;"></view>
				<text class="icon_textstyle">{{item.tit}}</text>
				<text class="red_text" v-if="count > 0 && item.tit=='消息通知'" >{{count}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "top-tab",
		props: {
			tital: {
				type: Array,
				default: function() {
					return [];
				},
			},
			count:{
				type: String,
				default:''
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			class_control(item){
				this.$emit('onClick', item);
			},
		}
	}
</script>

<style>
	.icon_textstyle {
		font-size: 25rpx;
		color: #666666;
	}
	.red_text {
		width: 25rpx;
		height: 25rpx;
		border-radius: 180rpx;
		background-color: #ED1C24;
		color: #FFFFFF;
		position: absolute;
		line-height: 25rpx;
		top: -8rpx;
		right: 60rpx;
		text-align: center;
	}
</style>
